<template>
  <view class="bills-container">
    <!-- 1. 加载状态 -->
    <view v-if="isLoading" class="loading">
      <view class="loading-icon">
        <view class="spinner"></view>
      </view>
      <text>加载账单中...</text>
    </view>

    <!-- 2. 加载完成/失败统一展示 -->
    <view v-else>
      <!-- 失败提示 -->
      <view v-if="isLoadFail" class="load-fail">
        <text>账单加载失败，请重试</text>
        <button @click="fetchBills">重新加载</button>
      </view>

      <!-- 3. 账单列表（成功时展示） -->
      <view v-else class="bills-list">
        <!-- 账单项 -->
        <view class="bill-item" v-for="(item, index) in bills" :key="item.billId || index">
          <view class="bill-icon">
            <image src="/static/images/my-bills.png" mode="widthFix"></image>
          </view>
          
          <view class="bill-detail">
            <view class="bill-title">
              <text>账单记录 #{{ item.billId || '未知' }}</text>
            </view>
            <view class="bill-meta">
              <text class="bill-time">{{ formatDate(item.createTime) || '无时间' }}</text>
              <text class="bill-status" :class="{ paid: item.status === 1 }">
                {{ item.status === 1 ? '已计费' : '未计费' }}
              </text>
            </view>
          </view>
          
          <!-- 统一支出金额 -->
          <view class="bill-amount">
            ¥{{ formatAmount(item.bill) || '0.00' }}
          </view>
        </view>
        
        <!-- 空状态（bills始终是数组，可安全访问length） -->
        <view class="empty" v-if="bills.length === 0">
          <image src="/static/icons/empty.png" mode="widthFix"></image>
          <text>暂无相关账单记录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { billApi } from '../../api/billApi';

// 核心状态：bills初始化为空数组，避免undefined
const isLoading = ref(true);    // 加载中状态
const isLoadFail = ref(false); // 加载失败状态
const bills = ref([]);         // 账单数据（存储res.data中的数组）

// 页面加载触发
onLoad(async () => {
  await fetchBills();
});

// 核心：获取账单（完全匹配「code在res根节点、数据在res.data」的接口格式）
const fetchBills = async () => {
  try {
    // 重置状态：加载前确保bills是空数组
    isLoading.value = true;
    isLoadFail.value = false;
    bills.value = [];

    // 1. 读取并校验用户ID
    const storedUser = uni.getStorageSync('userInfo');
    if (!storedUser?.userId) {
      throw new Error('未获取到用户信息');
    }
    const userId = Number(storedUser.userId);
    if (isNaN(userId)) {
      throw new Error('用户ID格式错误');
    }

    // 2. 调用接口 + 正确校验响应（关键修复：code在res根节点）
    const res = await billApi.getBillList(userId);
    
    // 先判断res是否存在，再校验根节点的code（0为成功）
    if (!res || res.code !== 0) {
      // 若有错误信息，优先用接口返回的msg，否则用默认提示
      throw new Error(res?.msg || '接口请求失败');
    }

    // 3. 正确赋值：账单数组在res.data里（匹配你提供的接口数据结构）
    // 这里加||[]是兜底：若res.data为空，确保bills仍是数组
    bills.value = res.data || [];
    console.log('账单加载成功，数据：', bills.value);

  } catch (error) {
    // 失败时兜底：确保bills是空数组，避免访问length报错
    isLoadFail.value = true;
    bills.value = [];
    console.error('账单加载失败原因:', error.message);

  } finally {
    // 无论成功失败，都结束加载
    isLoading.value = false;
  }
};

// 金额格式化（取绝对值，统一支出）
const formatAmount = (amount) => {
  return Math.abs(Number(amount)).toFixed(2);
};

// 日期格式化
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  // 处理日期无效的情况（避免显示Invalid Date）
  if (isNaN(date.getTime())) return '';
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
};
</script>

<style scoped>
/* 样式保持不变，无需修改 */
.bills-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}
.loading-icon {
  width: 60rpx;
  height: 60rpx;
}
.spinner {
  width: 100%;
  height: 100%;
  border: 6rpx solid rgba(0, 122, 255, 0.1);
  border-radius: 50%;
  border-top-color: #007AFF;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading text {
  margin-top: 20rpx;
  font-size: 30rpx;
  color: #666;
}

.load-fail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
  gap: 20rpx;
}
.load-fail text {
  font-size: 30rpx;
  color: #ff4d4f;
}
.load-fail button {
  width: 200rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 8rpx;
}

.bills-list {
  margin: 20rpx;
}
.bill-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx 20rpx;
  margin-bottom: 20rpx;
}

.bill-icon {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}
.bill-icon image {
  width: 36rpx;
  height: 36rpx;
}

.bill-detail {
  flex: 1;
}
.bill-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 8rpx;
}
.bill-meta {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #999;
}
.bill-status.paid {
  color: #00B42A;
}

.bill-amount {
  font-size: 30rpx;
  font-weight: bold;
  color: #FF4D4F;
  margin-left: 15rpx;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 150rpx 0;
  color: #999;
  font-size: 28rpx;
}
.empty image {
  width: 150rpx;
  height: 150rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}
</style>